<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>导航栏动画</title>
    <style>
        body {
            margin: 0;
        }
        
        nav {
            display: flex;
            flex-direction: row;
            width: 100%;
            min-height: 200px;
            background-image: linear-gradient(0deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.5));
            color: white;
            
            top: 0;
            position: sticky;
        }
        nav > * {
            flex: 1;
        }
        nav ul {
            margin: 15px 0;
/*            transition: ;*/
        }
        
        .navbar-line1, .navbar-line2 {
            list-style: none;
            display: flex;
            flex-direction: row;
            justify-content: space-around;
            transition: font-size .5s, margin .5s;
        }

        nav a {
            color: white;
            text-decoration: none;
            padding: 0 5px;
        }
        
        #navbar-logo {
            text-align: center;
            
        }
        #navbar-logo img {
            transition: width .5s;
        }
        
        .navbar-scrolled .navbar-line2{
            font-size: 1.2em;
        }
        .navbar-scrolled ul {
            margin: 10px 0;
        }
    </style>
</head>
<body>
    <nav>
        <div>
            <ul class="navbar-line1">
                <li><a href="#">本科招生</a></li>|
                <li><a href="#">到访农大</a></li>|
                <li><a href="#">我要加盟</a></li>|
                <li><a href="#">信息公开</a></li>|
                <li><a href="#">旧版</a></li>
            </ul>
            <hr>
            <ul class="navbar-line2">
                <li><a href="#">学校概况</a></li>
                <li><a href="#">机构设置</a></li>
                <li><a href="#">教育教学</a></li>
                <li><a href="#">师资队伍</a></li>
            </ul>
        </div>
        <div id="navbar-logo"><img src="logo.png" alt="LOGO" id="logo" style="width: 100%;"></div>
        <div>
            <ul class="navbar-line1">
                <li><a href="#">无障碍</a></li>|
                <li><a href="#">邮箱 ˅</a></li>|
                <li><a href="#">快速通道 ˅</a></li>|
                <li><a href="#">English</a></li>|
                <li><a href="#">搜索 🔍</a></li>
            </ul>
            <hr>
            <ul class="navbar-line2">
                <li><a href="#">科学研究</a></li>
                <li><a href="#">社会服务</a></li>
                <li><a href="#">招生就业</a></li>
                <li><a href="#">印象农大</a></li>
            </ul>
        </div>
    </nav>
    
    <script>
        const logoEle = document.getElementById('logo');
        function debounce(func, timeout) {
            let timer;
            window.clearTimeout(timer);
            window.setTimeout(func, timeout);
        }
        
        const navbar = document.getElementsByTagName('nav')[0];
        document.addEventListener('scroll', function(e) {
            console.log(window.scrollY);

            if (window.scrollY > 100)
                debounce(() => {
                    logoEle.style.width = '70%';
                    navbar.classList.add('navbar-scrolled');
                }, 200);
            else if (navbar.classList.contains('navbar-scrolled'))
                debounce(() => {
                    logoEle.style.width = '100%';
                    navbar.classList.remove('navbar-scrolled');
                }, 200);
        });
    </script>
    
    <main>
        <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deleniti, quisquam temporibus mollitia, dignissimos quas quibusdam aliquid ad possimus soluta quos. Molestiae obcaecati accusamus voluptatum, placeat hic quos veritatis quaerat optio.</div>
        <div>Similique temporibus nemo pariatur molestias delectus reprehenderit ut neque repellendus, impedit minus quam nam suscipit labore quidem expedita quos officiis porro at ratione molestiae, id, incidunt autem perspiciatis. Excepturi, harum.</div>
        <div>Sit eum cupiditate nostrum blanditiis nobis nihil consequuntur quidem delectus earum laboriosam! Aperiam eius error, laudantium blanditiis perspiciatis aliquid nihil dolor ad, quidem mollitia, quos omnis ullam doloremque autem nam.</div>
        <div>Atque similique officiis quos temporibus ipsa fugiat, doloremque autem aliquid. Labore reprehenderit dolore accusantium dolorem, nobis recusandae? Aliquid sit modi, vitae quo consequuntur cupiditate debitis, minima accusantium eos eum quaerat.</div>
        <div>Iusto ut, commodi doloribus facilis voluptatem totam ipsa numquam dolores cumque sit praesentium natus officia, soluta atque quis nam minus placeat quaerat eum similique maxime! Amet harum, nulla fugiat accusamus!</div>
        <div>Dicta temporibus assumenda autem molestiae rem voluptas repellendus est libero, nulla inventore quod labore distinctio voluptates reprehenderit culpa dignissimos ipsum minus voluptatum! Autem omnis illum eius cum, dolorem magnam, deserunt.</div>
        <div>Odit magnam, beatae corrupti deleniti quod voluptate blanditiis optio aliquid nostrum, molestias soluta quisquam atque, porro hic alias explicabo quidem esse at deserunt! Ipsum iste dolor fugit dolore praesentium, provident!</div>
        <div>Deserunt veniam soluta, quod! Rem nisi praesentium officia tempora sapiente ipsam velit eum, enim facilis consectetur, ut repellendus. Natus cupiditate, est eaque tempora animi perferendis hic consequuntur molestiae tenetur doloremque?</div>
        <div>Voluptates enim, voluptatibus quidem iusto amet nisi, recusandae minus ullam possimus atque adipisci ex non, laborum quisquam. Beatae quas ipsa amet, totam, at recusandae unde id obcaecati, aspernatur, dolorem dignissimos.</div>
        <div>A amet nam expedita quam soluta necessitatibus ullam incidunt, quae architecto ea aut quis nemo magnam doloribus consequuntur provident, iusto illum dignissimos tempora, iure assumenda sit, quod. Culpa, commodi, hic.</div>
        <div>Iusto officiis rem at provident aut doloribus quia temporibus eveniet impedit recusandae quae, consequuntur a praesentium id laboriosam nam! Aliquid aspernatur quia cumque unde animi, inventore placeat culpa asperiores. Laborum.</div>
        <div>Quasi, porro perferendis tempora dicta in ratione sunt vel! Voluptate velit maxime sit, pariatur distinctio rem perferendis earum, ullam sunt eos consequuntur! Distinctio dignissimos alias voluptatum, libero minima ipsum ullam.</div>
        <div>Necessitatibus quae, repudiandae id a dolor iste sit itaque provident officia ut dignissimos fugit ipsum possimus distinctio minima tenetur vel neque, ipsa doloribus tempore dolorem quibusdam repellendus porro aliquid. Aliquam.</div>
        <div>Quaerat aperiam obcaecati ducimus, quidem consequuntur tempore impedit animi corrupti a, soluta molestiae laboriosam natus, voluptates eos rem, placeat rerum nisi voluptas ipsam ipsum enim in quae nulla sapiente. Suscipit.</div>
        <div>Vero tempora deleniti quidem et fugit architecto officiis voluptate! Laborum, facere, nostrum? Sapiente voluptatibus, adipisci obcaecati impedit tempora quo animi quas iure quibusdam assumenda iusto dignissimos blanditiis quod quisquam. Maxime!</div>
        <div>Magni quibusdam veniam dicta mollitia sapiente nesciunt nam est et doloremque ab, blanditiis iure, neque deleniti adipisci iusto pariatur consectetur aspernatur eveniet minima perferendis, quos atque magnam quo ad. Dolor.</div>
        <div>Magni delectus iure a, harum, alias provident, nesciunt consequatur voluptas rem accusantium sequi officiis doloribus explicabo vero nobis praesentium fugit libero culpa natus officia ducimus autem possimus minima? Vel, tenetur!</div>
        <div>Quibusdam sit impedit cupiditate eveniet quae earum sed quam est excepturi neque, laborum, asperiores dolor porro corrupti ea perspiciatis mollitia repellat. Optio debitis ipsum, magnam molestias dignissimos accusamus itaque nostrum!</div>
        <div>Assumenda pariatur dignissimos neque quasi sed, voluptates omnis officiis illum deleniti, unde aliquam vitae! Consequuntur nihil ea nemo facilis enim earum, voluptate quam dolorem libero doloremque quae perferendis commodi. Distinctio.</div>
        <div>Tempore, itaque ea alias non quod numquam doloribus sit provident consequatur quam magnam, ratione id earum ex! Incidunt voluptatum molestias tempora. Nam est provident omnis. Voluptatibus explicabo, possimus aperiam laborum?</div>
        <div>Odio voluptatibus eligendi fugit sint necessitatibus illum delectus expedita sequi voluptas odit similique omnis adipisci soluta, dolorem quibusdam ex suscipit reiciendis, maxime dolorum quae aliquid est dignissimos ullam? Ex, nobis.</div>
        <div>Quae, repellendus, facere. Officia illum autem vero aliquam aperiam natus dicta tenetur quo repellendus vel dolorem voluptas ipsum necessitatibus vitae harum quibusdam, eum facilis voluptatum totam culpa. Id rem, consectetur.</div>
        <div>Ullam iure, obcaecati, veritatis nostrum aliquam qui rerum perferendis ducimus voluptate expedita. Voluptate vero in, voluptates amet maiores modi provident incidunt, ullam unde velit harum quidem asperiores consequuntur! Quae, suscipit.</div>
        <div>Esse rerum fugit, dolor reprehenderit quam ipsam impedit tempore! Similique soluta doloribus, ab. Rerum obcaecati aut voluptate repudiandae saepe esse. Eligendi est quas atque odit quam libero velit consequatur et.</div>
        <div>Deleniti obcaecati vel, saepe, id culpa, esse hic quaerat itaque sint sequi, doloribus. Dolorum ipsum harum omnis mollitia aliquid maiores nemo rerum perspiciatis rem dolorem corporis natus quisquam, dignissimos necessitatibus.</div>
        <div>Ut doloremque optio sequi harum debitis error cumque, aspernatur hic. Veniam eius iusto adipisci, dolorum, provident enim omnis alias cumque quasi, possimus, ipsum fuga neque nihil ipsam qui. Odio, facilis!</div>
        <div>Molestiae fugiat, soluta eos harum quis cum voluptas doloremque suscipit reiciendis eveniet delectus iusto quasi minima totam eum, laboriosam assumenda debitis at aliquam eius nesciunt est hic molestias. Hic, ratione.</div>
        <div>Ut doloribus impedit quaerat natus voluptas perspiciatis beatae eius atque consequuntur suscipit, eveniet voluptate pariatur, ipsum obcaecati eligendi voluptatum veniam tempore. Consequatur eligendi ab sequi tenetur! Culpa ipsam, iste. Dolores!</div>
        <div>Est aliquid temporibus sunt, eveniet fugiat quae quaerat sed perspiciatis excepturi voluptates laboriosam neque fuga qui vitae maxime iure, doloribus totam adipisci culpa alias. Expedita, hic provident et debitis! Fugiat.</div>
        <div>Distinctio assumenda est voluptatum, dolores saepe enim atque ipsum tenetur hic qui quas ipsam. Ullam temporibus, sapiente unde nulla consequuntur atque et! Tenetur explicabo rerum doloribus voluptas distinctio laborum incidunt?</div>
    </main>
</body>
</html>